<!--微课-->
<template lang="pug">
  kalix-master
    div.box.w
      div.title-img
        <!--img(src="/static/PublicCourse/banner_u994.png")-->
        img(:src="topSrc")
      // 位置
      div.place
        span 当前位置 : &nbsp;&nbsp;
        router-link(v-bind:to="{name:'Index'}") 首页&nbsp;>&nbsp;
        span.gongkai 微课
      //搜索框
      div.search-two
        div.search-one
          //搜索图标
          div.search-three
            img(src="/static/PublicCourse/搜索_u976.png" @click="getName()")
        div.search
          input(v-model="courseName" type="text" placeholder="请输入课程名称"  onfocus="this.placeholder=''" onblur="this.placeholder='请输入课程名称'")
        //三级标题
        div.heading
          div.the-title
            div.the-title1
              span Heading 3&nbsp;&nbsp;&nbsp;
          div.the-title
            div.the-title2
              span Heading 3&nbsp;&nbsp;&nbsp;
          div.the-title
            div.the-title3
              span Heading 3&nbsp;&nbsp;&nbsp;
      //分类
      div.classification.clearfix
        //分类标准
        div.classify.clearfix
          span 课程分类 :
          ul
            li(v-for="(item,index) in courseClass"  @click="getCourseNameFL(item,index)"  :class="index === iscourseClass?'Greens':''") {{ item.name }}
        div.classify.clearfix
          span 课时 :
          ul
            li(v-for="(item,index) in timeClass" @click="getClassHour(item,index)"  :class="index === istimeClass?'Greens':''") {{ item }}
        div.classify.clearfix
          span 学分 :
          ul
            li(v-for="(item,index) in credits" @click="getCredits(item,index)"  :class="index === iscredits?'Greens':''") {{ item }}
        div.classify.clearfix
          span 年份 :
          ul
            li(v-for="(item,index) in year" @click="getYear(item,index)"  :class="index === isyear?'Greens':''") {{ item }}
      <!--综合排序-->
      div.zonghe
        div.zonghe-left
          div.sort
            div.sort-paixu
              ul
                <!--li( v-for="(item,index) in sorting" @click="isColor(item,index)" :class="index === isSorting?'Greens':''").sortLi {{ item.title }}&nbsp;&nbsp;&nbsp;&nbsp;|-->
                li(@click="getClear()" :class="{GreensPlus: index===1}") 综合排序&nbsp;&nbsp;&nbsp;&nbsp;|
                li(@click="getUpdateDate()" :class="{GreensPlus: index===2}") 更新时间&nbsp;&nbsp;&nbsp;&nbsp;|
                li(@click="getHits()" :class="{GreensPlus: index===3}") 点击率&nbsp;&nbsp;&nbsp;&nbsp;|
          <!--课程视频连接-->
          ul.shipin-ul
            li.shipin-li(v-for="(kc, index) in kcData.slice((currentPage-1)*pagesize,currentPage*pagesize)")
              div.shipin
                router-link(:to="{path:'/videopage/'+kc.id}")
                  div.shipinKcheng
                    div.tupian
                      img(:src="kc.photo").picture
                      span.keshi 课时 {{kc.classHour}}
                      span.xuefen 学分 {{kc.credit}}
                    p.mingcheng
                      a(href="#" ) {{kc.name}}
                    p
                      a( href="#" class="jianjie") {{kc.introduction}}
                    p
                      a( href="#" class="chakan" @click="getVideos()") 查看更多→
          div.paging
            el-pagination(
            @current-change="current_change"
            layout="prev, pager, next"
            :total="total")
        div.zonghe-right
          div.zonghe-img
            <!--img( src="/static/PublicCourse/u804.png" )-->
            img(:src="bottomSrc")
          div.kecheng
            span.tuijian 推荐
            span 课程
          div.kecheng-name
            div.kecheng-name1(v-for="hc in hcData")
              router-link(:to="{path:'/videopage/'+hc.cid}")
                div.kecheng-img.clearfix
                  <!--img(src="/static/PublicCourse/u798.png" )-->
                  img(:src="hc.photo")
                div.kecheng-right
                  p.tl {{hc.cname}}
                  p.tt {{hc.uname}}
                  p.tt  课时 {{hc.classHour}}
                    span.te 学分 {{hc.credit}}
                div.clear
</template>

<script type="text/ecmascript-6">
  import FormModel from './model'
  import Message from '../../common/message'

  export default {
    data() {
      return {
        formModel: Object.assign({}, FormModel),
        hcData: [],
        kcData: [],
        topSrc: '',
        bottomSrc: '',
        courseClass: [],
        timeClass: ['0-10', '10-20', '20-30', '30以上'],
        credits: ['0-2', '2-5', '5-8', '8分以上'],
        year: ['2015', '2016', '2017', '2018', '2019'],
        iscourseClass: '',
        istimeClass: '',
        iscredits: '',
        isyear: '',
        courseName: null,
        isSorting: 0,
        index: '',
        total: null, // 默认数据总数
        pagesize: 12, // 每页的数据条数
        currentPage: 1 // 默认开始页面
        // sorting: [
        //   {title: '综合排序'},
        //   {title: '观看人数'}
        // ]
      }
    },
    mounted() {
      this.getImg()
      this.getHotlists()
      this.getCourseByData()
      this.getCourseName()
    },
    methods: {
      current_change(currentPage) {
        this.currentPage = currentPage
      },
      getImg() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/imgss/getImgByType',
          params: {
            'type': '微课'
          }
        }).then(res => {
          this.topSrc = res.data.data[0].imgUrl
          this.bottomSrc = res.data.data[1].imgUrl
        })
      },
      getHotlists() { // 推荐课程
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/hotlistsCourses/getAllHotlistsCourse',
          params: {}
        }).then(res => {
          this.hcData = res.data.data
        })
      },
      getCourseName() { // 课程分类名称
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/courseName',
          params: {}
        }).then(res => {
          this.courseClass = res.data.data
        })
      },
      getName() { // 搜索课程名称获取数据
        this.formModel.name = this.courseName
        this.getCourseByData()
      },
      getCourseByData() { // 多条件查询及排序功能
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/course/getCourseByData',
          params: {
            gid: '3',
            name: this.formModel.name,
            classHour: this.formModel.classHour,
            credit: this.formModel.credit,
            year: this.formModel.chooseYear,
            sort: this.formModel.sort
          }
        }).then(res => {
          if (res.data.data.length !== 0) {
            this.kcData = res.data.data
            this.total = this.kcData.length / this.pagesize * 10
          } else {
            Message.info('暂无数据')
            this.kcData = []
            this.total = null
          }
        })
      },
      /*
      * 课程分类
      * */
      getCourseNameFL(item, index) { // 点击课程分类获取数据
        console.log('getCourseNameFL-------:', item.name)
        if (this.iscourseClass !== index) {
          this.iscourseClass = index
          this.formModel.name = item.name
          this.getCourseByData()
        } else {
          this.iscourseClass = ''
          this.formModel.name = null
          this.getCourseByData()
        }
      },
      getClassHour(item, index) { // 点击课时获取数据
        if (this.istimeClass !== index) {
          this.istimeClass = index
          this.formModel.classHour = item
          this.getCourseByData()
        } else {
          this.istimeClass = ''
          this.formModel.classHour = null
          this.getCourseByData()
        }
      },
      getCredits(item, index) { // 点击学分获取数据
        if (this.iscredits !== index) {
          this.iscredits = index
          this.formModel.credit = item
          this.getCourseByData()
        } else {
          this.iscredits = ''
          this.formModel.credit = null
          this.getCourseByData()
        }
      },
      getYear(item, index) { // 点击年份获取数据
        if (this.isyear !== index) {
          this.isyear = index
          this.formModel.chooseYear = item
          this.getCourseByData()
        } else {
          this.isyear = ''
          this.formModel.chooseYear = null
          this.getCourseByData()
        }
      },
      isColor(item, index) {
        this.isSorting = index
      },
      getClear() { // 综合排序，清空
        this.index = 1
        this.formModel.sort = null
        this.getCourseByData()
      },
      getUpdateDate() {
        this.index = 2
        this.formModel.sort = 'updateDate'
        this.getCourseByData()
      },
      getHits() { // 按照点击率进行排序
        this.index = 3
        this.formModel.sort = 'hits'
        this.getCourseByData()
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .w
    width 1200px
    margin 0 auto
    -webkit-scrollbar display none

  ul li
    padding 0
    margin 0
    list-style none

  img
    width auto
    max-width 100%
    border 0

  a
    text-decoration: none
    color: #000

  .clearfix::after
    content ""
    clear both
    display block
    overflow hidden
    font-size 0
    height 0

  .clear
    clear both

  .box
    margin-top 20px

  .box .title-img img
    width 100%
    height 200px

  .place
    font-size 18px
    margin-top 2%

  .gongkai
    color #008F95

  /*搜索框*/
  .box .search-two
    width 350px
    margin 0 auto
    margin-top 18px
    position relative

  .box .search-one
    width 350px
    height 30px
    border-radius 5px
    box-sizing border-box
    border 2px solid #CCCCCC
    position relative

  .box .search-three
    position absolute
    left 314px
    top 4px
    width 20px
    height 20px
    cursor pointer

  .box .search
    position absolute
    left 14px
    top 6px

  .box .search input
    width 280px
    border none
    outline none
    color rgb(153, 153, 153)
    font-size 13px

  /* 三级标题 */
  .heading
    width 220px

  .heading .the-title
    float left
    font-size 10px
    color #CCCFDA

  /*white-space nowrap*/
  /*待定*/
  .classification
    font-size 14px
    margin-top 40px

  .classify
    margin-top 20px

  .classify span
    display inline-block
    width 70px
    text-align right
    float left
    margin-right 38px

  .classify ul
    -o-user-select none /*文字禁止被选中*/
    -moz-user-select none /*火狐 firefox*/
    -webkit-user-select none /*webkit浏览器*/
    -ms-user-select none /*IE10+*/
    -khtml-user-select none /*早期的浏览器*/
    user-select none

  .classify li
    display inline-block
    width 70px
    text-align center
    float left
    margin 0 10px
    cursor pointer

  /*综合排序*/
  .zonghe
    margin-top 40px
    width 100%
    height 890px

  /*左边*/
  .zonghe-left
    width 66.7%
    height 100%
    float left
    position relative

  .zonghe-left .sort
    width 800px
    height 40px
    border 1px solid #CCCCCC
    box-sizing border-box
    background-color #E6F4F5

  .sort .sort-paixu ul
    margin-left: 40px

  .sort-paixu li
    /*float left*/
    display inline-block
    height 40px
    line-height 40px
    margin-right 20px
    color #999
    cursor pointer

  .shipin
    display inline-block
    width 170px
    height 230px
    margin-bottom 30px
    background-color #fff

  .shipin-ul
    margin 0
    padding 0
    list-style none
    /*display flex*/
    /*flex-wrap wrap*/
    /*flex-direction row*/
    /*justify-content space-around*/
    margin-top 18px

  /*justify-content stretch*/
  .shipin-li
    margin-top -16px
    display inline-block
    margin 0 14px 0 14px

  .shipin .shipinKcheng
    position relative

  .shipin .shipinKcheng p
    margin-bottom 14px

  .shipin .shipinKcheng .tupian
    width 170px
    height 120px
    position relative
    overflow hidden

  .picture
    width 170px
    height 120px
    border-radius 5px

  .shipin .shipinKcheng .keshi
    position absolute
    left 56px
    bottom 10px
    width 48px
    height 18px
    line-height 18px
    background-color rgba(0, 0, 0, 0.5)
    border-radius 10px
    text-align center
    font-size 12px
    color #fff

  .shipin .shipinKcheng .xuefen
    position absolute
    left 112px
    bottom 10px
    width 48px
    height 18px
    line-height 18px
    background-color rgba(0, 0, 0, 0.5)
    border-radius 10px
    text-align center
    font-size 12px
    color #fff

  //  课程名称
  .mingcheng
    margin-top 20px
    word-break keep-all /* 不换行 */
    white-space nowrap /* 不换行 */
    overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow ellipsis

  /*课程简介*/
  .jianjie
    color #9999B2
    font-size 14px
    margin-top 10px

  /*查看更多*/
  .chakan
    color #6CC1FD
    font-size 14px

  /*右边*/
  .zonghe-right
    width 30%
    height 100%
    float right

  .zonghe-right .zonghe-img img
    width 100%
    height 120px
    border-radius 5px

  .kecheng
    font-size 24px
    margin-top 34px
    margin-bottom 22px
    letter-spacing 10px

  .kecheng .tuijian
    color #008F95

  .kecheng-name1
    width 100%
    height 110px
    background-color #FDF7E6
    border-radius 5px
    overflow hidden
    margin-bottom 20px

  .kecheng-name1 a
    display block
    width 100%
    height 100%

  .kecheng-name1 .kecheng-img
    float left

  .kecheng-img img
    width 110px
    height 110px
    border-radius 4px

  .kecheng-right
    float left
    margin-left 15px
    padding-top 16px
    width 230px

  .kecheng-name1 .kecheng-right p
    margin 0
    margin-bottom 14px

  .tl
    font-size 18px
    word-break keep-all /* 不换行 */
    white-space nowrap /* 不换行 */
    overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow ellipsis

  .tt
    font-size 14px
    color #99A4B8

  .te
    margin-left 16px

  .boot-paging
    border none
    margin-left 166px

  .Greens
    color #008F95
    font-weight 700

  .GreensPlus
    color #008F95 !important

  // 分页
  .paging
    position absolute
    left 50%
    bottom 0
    transform translate(-50%)
</style>
